@import "variables";
seed-coupon-card{
  .coupon-card{
    width: 100%;
    height: pxTorem(185);
    margin-bottom: pxTorem(30);
    position: relative;
    background-color: color($h5,c9);
    font-size: pxTorem(22);
    color: color($h5,c3);
    .coupon-price{
      width: 35%;
      height: pxTorem(185);
      background: url(#{$images-path}/coupon_usable_bg.png) no-repeat right center/cover;
      color: color($h5,c10);
      p{
        margin-bottom: pxTorem(15);
      }
      .coupon-amount{
        font-size: pxTorem(58);
        line-height: pxTorem(60);
      }
    }
    .coupon-price-bg{
      background: url(#{$images-path}/coupon_used_bg.png) no-repeat right center/cover;
    }
    .coupon-info{
      flex-grow: 1;
      padding: pxTorem(30) 0 pxTorem(30) pxTorem(20);
      .coupon-type{
        color: color($h5,c2);
        font-size: pxTorem(30);
        line-height: pxTorem(30);
        margin-bottom:pxTorem(5);
        white-space: nowrap;
      }

      .coupon-center{
        height: pxTorem(65);
        position: relative;
        .coupon-range{
          margin-top: pxTorem(20);
          white-space: nowrap;
          float: left;
        }
        .coupon-getbtn{
          margin:pxTorem(5) pxTorem(15) 0 pxTorem(5) ;
          float: right;
          button{
            width:pxTorem(124) ;
            height: pxTorem(46);
            padding-left: 0;
            padding-right: 0;
            text-align: center;
            border-radius: pxTorem(23);
            border: pxTorem(2) solid color($h5,c1);
            color: color($h5,c1);
            font-size: pxTorem(22);
            white-space: nowrap;
          }
          .disabled{
            border-color: color($h5,c4);
            color: color($h5,c4);
          }
        }

      }
      .coupon-indate{
        white-space: nowrap;
      }

    }


    .coupon-icon{
      width: pxTorem(78);
      height: pxTorem(78);
      position: absolute;
      top: 0;
      right: 0;
    }
    .coupon-choose {
      height: 100%;
      padding-right: pxTorem(20);
      .icon-determine{
        opacity: 0;
        @include icon(32,30,'#{$icons-path}/coupon_choose.png');
        &.hasChoose {
          opacity: 1;
        }
      }
    }
  }
}
